<template>
  <div :class="['header-animat',menuType==='sideMenu'?'side-menu':null]">
    <a-layout-header
      style="padding:0px;"
      :class="[fixHeader?'ant-header-fixedHeader':null,(isMobile())?null: (collapsed?'ant-header-side-closed':'ant-header-side-opened')]"
    >
      <!-- 如果当前为左侧sideMenu菜单 -->
      <div v-if="mode === 'sideMenu'" class="header">
        <!-- 顶部左侧菜单 -->
        <div class="left-menu">
          <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
        </div>
        <!-- 面包屑 -->
        <div class="left-menu" v-if="!isMobile()">
          <breadcrumb></breadcrumb>
        </div>
        <!-- 顶部右侧菜单 -->
        <user-menu />
      </div>
      <!-- 当前为顶部菜单 -->
      <div v-else :class="['top-nav-header-index', theme]">
        <div class="header-index-wide">
          <div class="header-index-left">
            <logo class="top-nav-header" />
            <future-menu mode="horizontal" :menus="menus" :theme="theme" />
          </div>
          <user-menu class="header-index-right"></user-menu>
        </div>
      </div>
    </a-layout-header>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import FutureMenu from "@/layouts/component/FutureMenu";
import UserMenu from "@/components/tools/UserMenu";
import Logo from "@/components/tools/Logo";
import { mixin, mixinDevice } from "@/utils/mixin";
export default {
  mixins: [mixin, mixinDevice],
  name: "GlobalHeader",
  components: { Breadcrumb, FutureMenu, UserMenu, Logo },
  props: {
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    mode: {
      type: String,
      default: "sideMenu"
    },
    menus: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      default: "dark"
    }
  },
  data() {
    return {};
  },
  methods: {
    toggle() {
      this.$emit("toggle");
    }
  }
};
</script>

<style lang="less" >
#qc-layout .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }
}

.left-menu {
  float: left;
}

.ant-layout-header .ant-breadcrumb {
  line-height: 64px;
}
.ant-layout .header {
  height: 64px;
  padding: 0 12px 0 0;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
}

.header-animat {
  position: relative;
  z-index: 105;
}

// 2020/4/24 加顶部样式
#qc-layout .ant-layout .top-nav-header-index {
  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  -webkit-transition: background 0.3s, width 0.2s;
  transition: background 0.3s, width 0.2s;
  .header-index-wide {
    max-width: 1200px;
    margin: auto;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 64px;
    .header-index-left {
      -webkit-box-flex: 0;
      -ms-flex: 0 1 1000px;
      flex: 0 1 1000px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      .logo.top-nav-header {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 165px;
        flex: 0 0 165px;
        width: 165px;
        height: 64px;
        position: relative;
        line-height: 64px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        overflow: hidden;
        svg {
          display: inline-block;
          vertical-align: middle;
          height: 32px;
          width: 32px;
        }
        h1 {
          color: #fff;
          display: inline-block;
          vertical-align: top;
          font-size: 16px;
          margin: 0 0 0 12px;
          font-weight: 400;
        }
      }
    }

    .header-index-right {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 238px;
      flex: 0 0 238px;
      -ms-flex-item-align: end;
      align-self: flex-end;
      height: 64px;
      overflow: hidden;
      .user-menu .action {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .ant-menu.ant-menu-horizontal {
      max-width: 835px;
      -webkit-box-flex: 0;
      -ms-flex: 0 1 835px;
      flex: 0 1 835px;
      border: none;
      height: 64px;
      line-height: 64px;
    }
  }
}

#qc-layout .ant-layout {
  .top-nav-header-index.dark .user-menu {
    .action:hover {
      background: hsla(0, 0%, 100%, 0.16);
    }
    .anticon {
      color: hsla(0, 0%, 100%, 0.85);
    }

    .ant-dropdown-trigger {
      color: hsla(0, 0%, 100%, 0.85);
    }
  }
  .top-nav-header-index.light {
    background-color: #fff;
    .header-index-wide .header-index-left .logo h1 {
      color: #002140;
    }
  }
}

#qc-layout .ant-layout .ant-header-fixedHeader {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
}

#qc-layout.ant-layout
  .side-menu
  .ant-header-fixedHeader.ant-header-side-closed {
  width: calc(100% - 80px);
}

#qc-layout
  .ant-layout
  .side-menu
  .ant-header-fixedHeader.ant-header-side-opened {
  width: calc(100% - 256px);
}
</style>
